import React, { Component } from 'react';
import { Flex, Carousel } from 'antd-mobile';
import { hot } from './newGroup.less';
import {connect} from "dva";
import {routerRedux} from "dva/router";


class NewGroup extends Component {
    constructor(props){
        super(props)
        this.state={
            num:0,
            id:[],
            i:0
        };
        this.timer=null;
    }

    componentDidMount() {
        // simulate img loading
        const { newGroupList, style,cl } = this.props;
        console.log(newGroupList)
        var a=[]
        newGroupList&&newGroupList.map((v,i)=>{
            if(cl==0) a.push(v.specId)
            else if(cl==1) a.push(v.groupId)
        });
        this.setState({
            id:a
        })
        this.timer =  setTimeout(() => {
            this.setState({
                num:this.state.num+1
            });
        }, 1000);

    }

    componentWillUnmount(){
        //console.log(2);
        if(this.timer!=null){
            clearTimeout(this.timer);
        }
    }

    render() {
        const { newGroupList, style,cl } = this.props;
        const { id,i } = this.state;
        console.log(id,newGroupList,cl)
        return (
            <div style={style} className={hot}>
                <Flex className="hot_body" justify="center">
                    <div className="hot_title">新品:</div>
                    <Flex.Item className="text-overflow-hidden" style={{ color:"#fff",height:".8rem",lineHeight:".8rem",width:"3.5rem" }}>
                        <Carousel className="my-carousel"
                                  vertical
                                  dots={false}
                                  selectedIndex={this.state.num}
                                  dragging={false}
                                  swiping={false}
                                  autoplay={true}
                                  infinite
                                  speed={200}
                                  autoplayInterval={2500}
                                  beforeChange={(from,to)=>{
                                      this.setState({
                                          i:from
                                      });
                                  }}
                            // resetAutoplay={false}
                        >
                            {
                                newGroupList.map((v,i,a)=>{
                                    return <div key={i} onChange={()=>{
                                    }}>{v.description}</div>
                                })
                            }
                        </Carousel>
                    </Flex.Item>
                    <div className="line"></div>
                    <div onClick={()=>{
                        if(cl==0){
                            this.props.dispatch(routerRedux.push(`/goodsDetail/${id[i]}`));
                        }else if(cl==1){
                            console.log(id[i])
                            this.props.showModal(id[i])
                        }
                    }} className="hot_more" style={{background:"#FE0A3E",borderRadius:".3rem",padding:".1rem .15rem",marginLeft:".2rem"}} >立即参与</div>
                </Flex>
            </div>
        )
    }
}
export default connect(({ goodsDetail }) => ({ goodsDetail }))(NewGroup);